<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="8">
              <a-statistic title="总阅读量" :value="statisticDatas.totalViewCount">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="总点赞量" :value="statisticDatas.totalVoteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="点赞率" :value="(statisticDatas.totalVoteCount/statisticDatas.totalViewCount)*100"
                           :precision="2"
                           suffix="%"
                           :value-style="{ color: '#cf1322' }">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic title="今日阅读" :value="statisticDatas.todayViewCount" style="margin-right: 50px">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="今日点赞" :value="statisticDatas.todayVoteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                      title="预计今日阅读"
                      :value="statisticDatas.todayViewIncrease"
                      :value-style="{ color: '#0000ff' }"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                      title="预计今日阅读增长率"
                      :value="statisticDatas.todayViewIncreaseRateAbs"
                      :precision="2"
                      suffix="%"
                      class="demo-class"
                      :value-style="statisticDatas.todayViewIncreaseRate<0 ? { color: '#cf1322' }:{ color: '#3f8600' }"
              >
                <template #prefix>
                  <arrow-up-outlined v-if="statisticDatas.todayViewIncreaseRate > 0"/>
                  <arrow-down-outlined v-if="statisticDatas.todayViewIncreaseRate <= 0"/>
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :span="24" id="main-col">
        <div id="main" style="width: 100%;height:400px;"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
  import {defineComponent, onMounted, ref} from 'vue';
  import axios from 'axios';
  import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
  //定义echarts对象
  declare let echarts: any;
  export default defineComponent({
    name: 'the-home',
    components: {
      ArrowUpOutlined,
      ArrowDownOutlined,
    },
    setup() {
      /**
       * 查找总阅读数、总点赞数、今日阅读数、今日点赞数
       */
      const statisticDatas =  ref();
      statisticDatas.value = {};
      //进行异步请求获取后台数据
      const handleQueryStatistic = ()=>{
        axios.get("/ebook-snapshot/getTopStatistic").then(function (response) {
          //接收返回的数据
          const result = response.data;
          if(result.success){//请求成功
            const statistic = result.content;
            //将后台的数据赋值给前台的响应式数据对象statisticDatas
            statisticDatas.value.totalViewCount = statistic[1].totalViewCount;
            statisticDatas.value.totalVoteCount = statistic[1].totalVoteCount;
            statisticDatas.value.todayViewCount = statistic[1].todayViewCount;
            statisticDatas.value.todayVoteCount = statistic[1].todayVoteCount;
            //获取到当前的时间
            const now = new Date();
            //获取截止当前时间所占一天中的百分比
            const nowPercent = (now.getHours()*60+now.getMinutes())/(24*60);
            //预计今日能达到的阅读量(整数)
            statisticDatas.value.todayViewIncrease =  parseInt(String(statistic[1].todayViewCount/nowPercent));
            //求预计今日阅读增长率
            //公式：((今日能达到的阅读量-昨日阅读量增量)/(昨日阅读量增量))*100
            statisticDatas.value.todayViewIncreaseRate = (statisticDatas.value.todayViewIncrease - statistic[0].todayViewCount)/statistic[0].todayViewCount*100;
            statisticDatas.value.todayViewIncreaseRateAbs = Math.abs(statisticDatas.value.todayViewIncreaseRate);
          }
        });
      };
      //请求获取30天阅读数和点赞数的接口
      const getThirtyStatistic = ()=>{
        axios.get("/ebook-snapshot/getThirtyStatistic").then(function (response) {
          //接收返回的数据
          const result = response.data;
          if(result.success){//请求成功
            const statisticList = result.content;//获取返回结果中的集合
            //封装折线图的数据
            initEcharts(statisticList);
            }
        });
      };

      //定义渲染折线图的方法
      const initEcharts = (list:any)=>{

        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'));
        //定义坐标
        const xAxis: any[] = [];
        const seriesView: any[] = [];
        const seriesVote: any[] = [];
        //后台获取数据给坐标赋值
        for(let i =0;i<list.length;i++){
          //拿出当前循环的对象
          let statistic = list[i];
          xAxis.push(statistic.date);//横坐标
          seriesView.push(statistic.totalViewCount);//阅读数纵坐标
          seriesVote.push(statistic.totalVoteCount);//点赞数纵坐标
        }
        // 指定图表的配置项和数据
        const option = {
          title: {
            text: '30天趋势图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['总阅读量', '总点赞量']
          },
          grid: {
            left: '1%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '总阅读量',
              type: 'line',
              // stack: '总量', 不堆叠
              data: seriesView,
              smooth: true
            },
            {
              name: '总点赞量',
              type: 'line',
              // stack: '总量', 不堆叠
              data: seriesVote,
              smooth: true
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      onMounted(() => {
        handleQueryStatistic();
        getThirtyStatistic();
      });
      return {
        statisticDatas
      };
    }
  });
</script>
<style>

</style>